<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>商品列表</span>
    </div>

    <el-table  ref="tableRef" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="account" label="账号">
      </el-table-column>
      <el-table-column prop="userGroup" label="用户组">
      </el-table-column>
      <el-table-column label="日期">
        <template slot-scope="scope">{{ scope.row.ctime | formatYMD }}</template>
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>

          <el-popconfirm @confirm="handleDelete(scope.row)" confirm-button-text='好的' cancel-button-text='不用了'
            icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？">
            <el-button slot="reference" size="mini" type="danger">删除</el-button>

          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="page" 
    background @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
      :current-page="currentPage"
       :page-sizes="[3, 6]" 
       :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
    </el-pagination>

    <!-- 操作 -->
    <div class="mt20">
      <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
      <el-button type="primary" @click="cancelChange">取消选择</el-button>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form class="form" size="small" label-width="80px" :model="formData">
        <el-form-item label="用户名">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="formData.userGroup" placeholder="请选择用户组">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button size="small" type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </div>
    </el-dialog>




  </el-card>




</template>

<script>
import { getUserListReq, delUserReq, editUserReq ,batchDelUserReq,} from '@/api/user';

export default {
  data() {
    return {
      dialogFormVisible: false, //编辑弹窗隐藏显示
      //弹窗数据
      formData: {
        id: '',
        account: '',
        userGroup: '',
      },
      pageSize: 6,
      total: 0,
      currentPage: 1,
      tableData: [],
      ids: [],
    }
  },
  methods: {
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      let res = await getUserListReq({
        currentPage,
        pageSize
      })
      let { data, total } = res.data
      this.total = total
      this.tableData = data
      if (data.length === 0 && this.currentPage != 1) {
        this.currentPage--;
        this.getData()
      }
    },

    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.ids = val.map(v => v.id)
      // console.log(this.ids);
    },
    handleEdit(row) {
      console.log(row);
      this.dialogFormVisible = true
      this.formData = { ...row }

    },
    async handleDelete(row) {
      let { id } = row
      let res = await delUserReq({ id })
      let { code, msg } = res.data
      if (code === 0) {
        this.getData()
       
      }
      // console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getData()
    },
    async handleConfirm() {
      let res = await editUserReq(this.formData)
      let { code, msg } = res.data
      if (code === 0) {
        this.dialogFormVisible = false
        //重新拉取数据
        this.getData()
      }
    },
    handleBatchDel() {
      this.$confirm('此操作将永久删除选中用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          //发送请求
          let res = await batchDelUserReq({ids: this.ids})
          //解构数据
          let {code, msg} = res.data
          //判断
          if (code === 0) {
            //重新拉取数据
            this.getData()
            this.$message.success(msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
      //取消选择
    cancelChange() {
      if (this.ids.length) {
        this.$refs.tableRef.clearSelection()
        this.$message.info('取消成功')
      } else {
        this.$message.info('没有选中')
      }
    },
  },

  created() {
    this.getData()

  }
}
</script>

<style lang="scss" scoped>
.page {
  margin-top: 20px;
}
</style>